<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>代理管理</el-breadcrumb-item>
			<el-breadcrumb-item>审核列表</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<!-- <div class="whole-flex-center-between whole-top-handle">
                <div class="search-area">
                    <el-button size="small" @click="clearFilter" style="margin-right:20px">重置所有筛选</el-button>
                    <el-select size="small" v-model="statusValue" class="margin-r-5" placeholder="选择商户状态" :popper-append-to-body="false">
                        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                    <el-col :span="4" class="margin-r-5">
                        <el-input size="small" v-model="nameValue" placeholder="要查询的商户名" clearable></el-input>
                    </el-col>
                    <el-button size="small" @click="getAgentList(1,statusValue,nameValue)">查询</el-button>
                </div>
            </div> -->

			<div class="whole-flow-table-box">
				<el-table ref="myTable" :data="userList" style="width: 100%" stripe border>
					<el-table-column align="center" type="selection" width="50"></el-table-column>
					<el-table-column align="center" prop="id" label="UID" width="60"></el-table-column>
					<el-table-column align="center" prop="admin_user.account" label="登录账号"></el-table-column>
					<el-table-column align="center" prop="name" label="姓名" width="100"></el-table-column>
					<el-table-column align="center" prop="link_man" label="联系人" width="100"></el-table-column>
					<el-table-column align="center" prop="mobile" label="联系方式"></el-table-column>
					<el-table-column align="center" prop="money" label="佣金" width="150"></el-table-column>
					<el-table-column align="center" prop="rate" label="费率" width="80"></el-table-column>
					<el-table-column align="center" prop="status" label="状态" width="70">
						<template slot-scope="scope">
							<el-tag v-if="scope.row.status==0" type="info" size="mini">待审</el-tag>
							<el-tag v-else-if="scope.row.status==1" type="success" size="mini">成功</el-tag>
							<el-tag v-else type="danger" size="mini">失败</el-tag>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="create_time" label="创建时间"></el-table-column>
					<el-table-column align="center" label="操作" width="300">
						<template slot-scope="scope">
							<el-button size="mini" @click="showAuditDialog(scope.row.id,scope.row.name)">审核</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="whole-pagination">
					<el-pagination :page-size="size" background layout="prev, pager, next" :total="count"
						@current-change="currentPage"></el-pagination>
				</div>
				<el-dialog title="审核反馈" :visible.sync="AuditDialogVisible" width="500px" :before-close="handleClose">
					<div>
						<el-form ref="auditFromRef" :model="auditFrom" label-width="150px">
							<el-form-item label="代理姓名：">
								<span>{{auditFrom.user_name}}</span>
							</el-form-item>
							<el-form-item label="审核结果：">
								<el-radio-group v-model="auditFrom.status">
									<el-radio :label="1">审核通过</el-radio>
									<el-radio :label="2">审核失败</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-form>
					</div>
					<span slot="footer" class="dialog-footer">
						<el-button @click="AuditDialogVisible = false">取 消</el-button>
						<el-button type="primary" @click="auditSetStatus(auditFrom)">确 定</el-button>
					</span>
				</el-dialog>
			</div>
		</el-card>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				userList: [],
				count: 0,
				size: 10,
				page: 1,
				imgList: [],
				// 审核弹框显隐
				AuditDialogVisible: false,
				// 审核表单
				auditFrom: {},
			};
		},
		created() {
			this.getAgentList(1);
		},
		methods: {
			// 重置筛选
			// clearFilter() {
			//     this.$refs.myTable.clearFilter();
			//     this.statusValue = "";
			//     this.nameValue = "";
			//     this.getAgentList(1);
			// },
			// 获取代理商列表列表
			getAgentList(page) {
				let _this = this;
				this.$axios({
					url: "/admin/master/getAgent",
					data: {
						offset: page,
						limit: this.size,
						status: 0
					},
					success(res) {
						if (res.data.code == 200) {
							_this.userList = res.data.content.data;
							_this.count = Number(res.data.content.count);
						}
					},
				});
			},
			currentPage(page) {
				this.getAgentList(page);
			},
			handleClose(done) {
				this.$confirm("确认关闭？")
					.then((_) => {
						done();
					})
					.catch((_) => {});
			},
			showAuditDialog(id, name) {
				this.AuditDialogVisible = true;
				this.auditFrom.userID = id;
				this.auditFrom.user_name = name;
			},
			auditSetStatus(from) {
				let _this = this;
				if (from.status == undefined) {
					this.$message({
						type: "error",
						message: "请选择审核结果",
					});
					return;
				}
				this.$axios({
					url: "/admin/master/auditAgent",
					data: {
						agentID: from.userID,
						status: from.status,
					},
					success(res) {
						if (res.data.code == 200) {
							_this.$message({
								type: "success",
								message: "审核完成",
							});
							_this.$refs.auditFromRef.resetFields();
							_this.AuditDialogVisible = false;
							_this.getAgentList(_this.page);
						}
					},
				});
			},
		},
	};
</script>
<style scoped>
	.shrink-box {
		width: 100%;
		font-size: 0;
	}

	.shrink-box>>>label {
		width: 140px;
		color: #99a9bf;
	}

	.shrink-box .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 33.333333%;
	}

	.a {
		vertical-align: middle;
	}

	.imgs-con {
		height: 450px;
		overflow: auto;
		display: flex;
		flex-wrap: wrap;
	}

	.imgs-con>.card {
		margin-right: 10px;
		margin-bottom: 10px;
		text-align: center;
		font-size: 12px;
	}

	.imgs-con>.card:nth-child(4n) {
		margin-right: 0;
	}
</style>
